<template>
  <div class="news-container">
    <div class="news-header">
      <h2>羽毛球新闻资讯</h2>
      <div class="news-filters">
        <select v-model="selectedCategory" @change="filterNews">
          <option value="all">全部新闻</option>
          <option value="tournament">赛事新闻</option>
          <option value="player">球员动态</option>
          <option value="technology">技术革新</option>
          <option value="event">活动公告</option>
        </select>
      </div>
    </div>

    <!-- 新闻列表 -->
    <div class="news-list">
      <div class="news-card" v-for="newsItem in filteredNews" :key="newsItem.id">
        <div class="news-image">
          <img :src="newsItem.imageUrl" :alt="newsItem.title">
        </div>
        <div class="news-content">
          <div class="news-category">{{ getCategoryName(newsItem.category) }}</div>
          <h3 class="news-title">{{ newsItem.title }}</h3>
          <div class="news-meta">
            <span class="news-date">{{ formatDate(newsItem.date) }}</span>
            <span class="news-source">{{ newsItem.source }}</span>
          </div>
          <p class="news-summary">{{ newsItem.summary }}</p>
          <button class="read-more-btn">阅读全文</button>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination" v-if="newsItems.length > 0">
      <button @click="currentPage > 1 && (currentPage--)" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button @click="currentPage < totalPages && (currentPage++)" :disabled="currentPage === totalPages">下一页</button>
    </div>

    <div class="no-news" v-if="filteredNews.length === 0">
      暂无相关新闻
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 状态管理
const currentPage = ref(1);
const selectedCategory = ref('all');
const itemsPerPage = 6;

// 模拟新闻数据
const newsItems = ref([
  {
    id: 1,
    title: '争夺全国总决赛参赛资格 超600名羽毛球爱好者竞技成都',
    category: 'tournament',
    date: '2025-08-27',
    source: '羽毛球协会官网',
    summary: '与世运同行，成都全民运动氛围高涨。6月25日，封面新闻记者从成都市郫都区羽毛球协会了解到，2025年薰风“无畏挑战”羽毛球混合团体赛（成都站）在郫都区体育中心收官',
    imageUrl: 'https://inews.gtimg.com/news_bt/Oj7g8-JPFUVrFldGjpvX_QBzV0kBdkc8P15Zzml9LyAZ8AA/641'
  },
  {
    id: 2,
    title: '羽动大连，荣耀共享！“诺维溪谷杯”大连·李永波羽毛球公开赛圆满落幕！',
    category: 'player',
    date: '2025-07-04',
    source: '体育新闻网',
    summary: '6月22日下午，“诺维溪谷杯”大连·李永波羽毛球公开赛在大连·LYB李永波国际羽毛球训练中心（冰山慧谷店）圆满落幕。中国羽毛球功勋教练、LYB品牌创始人李永波，百年水润（大连）商贸有限公司总经理于涛，羽毛球奥运冠军杜婧，羽毛球世界冠军孙瑜等嘉宾出席赛事颁奖典礼并为获奖运动员颁奖。',
    imageUrl: 'https://zbhk-new.lnyun.com.cn/www/dbxww/images/202506/1937742307107704833.jpeg'
  },
  {
    id: 3,
    title: '新一代碳纤维羽毛球拍技术问世，重量减轻15%',
    category: 'technology',
    date: '2025-09-10',
    source: '装备科技报',
    summary: 'STROX99（天斧99），世界优秀选手始终坚持信赖的系列球拍。面向高水平和专业级选手的ASTROX99（天斧99）在连续攻击中产生强大力量。',
    imageUrl: 'https://x0.ifengimg.com/res/2024/4DD9EC07BAF4966C16FBADE092A6B951BD10F3EC_size228_w1440_h1080.jpg'
  },
  {
    id: 4,
    title: '全国青少年羽毛球锦标赛将于下月在广州举行',
    category: 'event',
    date: '2025-09-20',
    source: '青少年体育联盟',
    summary: '2023年全国青少年羽毛球锦标赛将于10月15日至25日在广州举行，预计将有来自全国各地的500多名青少年选手参赛，角逐12个项目的冠军。',
    imageUrl: 'https://images.unsplash.com/photo-1569473715693-962ae8174a4a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80'
  },
  {
    id: 5,
    title: '日本选手桃田贤斗宣布伤愈复出，目标瞄准巴黎奥运会',
    category: 'player',
    date: '2025-09-05',
    source: '国际羽联官网',
    summary: '日本羽毛球名将桃田贤斗在经历了长达8个月的伤病恢复后宣布复出，他表示将全力以赴备战巴黎奥运会，力争在男单项目上再创佳绩。',
    imageUrl: 'https://images.unsplash.com/photo-1574279606130-42730a85053f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80'
  },
  {
    id: 6,
    title: '2024年巴黎奥运会羽毛球项目赛程公布',
    category: 'tournament',
    date: '2025-09-15',
    source: '奥运会官网',
    summary: '巴黎奥组委公布了2024年奥运会羽毛球项目的详细赛程，比赛将于7月27日至8月5日举行，共设5个单项，预计将有来自38个国家和地区的172名运动员参赛。',
    imageUrl: 'https://images.unsplash.com/photo-1528543606781-2f6e6857f318?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80'
  }
]);

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
};

// 获取分类名称
const getCategoryName = (categoryValue) => {
  const categories = {
    'tournament': '赛事新闻',
    'player': '球员动态',
    'technology': '技术革新',
    'event': '活动公告'
  };
  return categories[categoryValue] || '其他';
};

// 筛选新闻
const filteredNews = computed(() => {
  let result = newsItems.value;
  
  // 按分类筛选
  if (selectedCategory.value !== 'all') {
    result = result.filter(item => item.category === selectedCategory.value);
  }
  
  // 分页处理
  const startIndex = (currentPage.value - 1) * itemsPerPage;
  return result.slice(startIndex, startIndex + itemsPerPage);
});

// 总页数
const totalPages = computed(() => {
  let filteredCount = newsItems.value.length;
  if (selectedCategory.value !== 'all') {
    filteredCount = newsItems.value.filter(item => item.category === selectedCategory.value).length;
  }
  return Math.ceil(filteredCount / itemsPerPage);
});

// 筛选新闻
const filterNews = () => {
  currentPage.value = 1; // 重置到第一页
};
</script>

<style scoped>
.news-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.news-header h2 {
  color: #2196F3;
  margin: 0;
}

.news-filters select {
  padding: 0.6rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
}

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.news-image {
  height: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.news-card:hover .news-image img {
  transform: scale(1.05);
}

.news-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-category {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background-color: #e3f2fd;
  color: #2196F3;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
  width: fit-content;
}

.news-title {
  color: #333;
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  line-height: 1.4;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.news-summary {
  color: #555;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  flex: 1;
}

.read-more-btn {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
  align-self: flex-start;
}

.read-more-btn:hover {
  background-color: #1976D2;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}

.pagination button {
  padding: 0.5rem 1rem;
  border: 1px solid #2196F3;
  background-color: white;
  color: #2196F3;
  border-radius: 4px;
  cursor: pointer;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination button:hover:not(:disabled) {
  background-color: #e3f2fd;
}

.no-news {
  text-align: center;
  padding: 3rem;
  color: #777;
  background-color: #f9f9f9;
  border-radius: 12px;
}
</style>